<template>
  <div style="height: 100%;">
    <div class="container1" style="margin-top: 2%;">
      <h1 style="color: #0caaff;">所有者信息</h1><br>
      <p>所有者姓名：{{ ownerName }}</p><br>
      <p>职务：{{ ownerPost }}</p><br>
      <p>所有者手机号：{{ ownerMobile }}</p><br>
      <el-button type="primary" class="btn" @click="bianji()">编辑</el-button>
      <!-- <el-button type="primary" class="btn" @click="dialogVisible = true">编辑</el-button> -->

      <el-dialog title="编辑诊所信息" :visible.sync="dialogVisible" width="40%" height="50%">

        <!-- 在这里写编辑的信息 -->
        <span>所&nbsp;有&nbsp;者&nbsp;姓名:</span>
        <el-input v-model="ownerName1" placeholder="请输入所有者姓名" style="width: 300px;"></el-input><br><br>
        <span>职&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务:</span>
        <el-input v-model="ownerPost1" placeholder="请输入职务" style="width: 300px;"></el-input><br><br>
        <span>所有者手机号:</span>
        <el-input v-model="ownerMobile1" placeholder="请输入手机号" style="width: 300px;" type="number"></el-input><br><br>
      
        <span>专&nbsp;&nbsp;&nbsp;业&nbsp;&nbsp;方&nbsp;&nbsp;向:</span>
        <el-input v-model="majorField1" placeholder="请输入专业方向" style="width: 300px;"></el-input><br><br>
        <span>诊&nbsp;&nbsp;&nbsp;所&nbsp;&nbsp;名&nbsp;&nbsp;称:</span>
        <el-input v-model="hospitalName1" placeholder="请输入诊所名称" style="width: 300px;"></el-input><br><br>
        <span slot="footer" class="dialog-footer">

          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="quding()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <div class="container2" style="margin-top: 1%;">
      <h1 style="color:#0caaff;">诊所信息</h1><br>
      <p>诊所名称：{{ hospitalName }}</p><br>
      <!-- <p>医生数量：{{ a }}</p><br> -->
        <p>诊所科室：<template>
                        <span v-for="a in kslist.data" :key="a.did">{{ a.departmentName }}&nbsp;&nbsp;&nbsp;</span>
                    </template></p ><br>
      <p>专业方向：{{ majorField }}</p><br>
      <p>诊所地址：{{ address }}</p><br>
      <p>诊所简介：<i readonly style="width: 50%;height: 20%;">
          {{ introduction }}
        </i>
      </p>
    </div>
  </div>
</template>
  
<script>
import axios from 'axios'
export default {
  name: "Clinic",
  data() {
    return {
       kslist: [],
      ownerName: "",
      ownerPost: "",
      ownerMobile: "",
      hospitalName: "",
      a: "",
      majorField: "",
      address: "",
      introduction: "",

      ownerName1: "",
      ownerPost1: "",
      ownerMobile1: "",
      hospitalName1: "",
      majorField1: "",

      dialogVisible: false
    }
  },
  mounted() {
    this.noe();
    this.keshi();
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    keshi(){
      axios.get("http://127.0.0.1:8686/his/sys/dept/list", {
      }).then(res => {
        this.kslist = res.data
        console.log(this.kslist)
      }).catch(err => {
        console.error(err);
      })
    },

    noe(){
        /**
     * 显示诊所信息
     */
    axios.get("http://127.0.0.1:8686/api/selectZhenSuoXX", {
    }).then(res => {
      console.log(res.data)
      for (let i = 0; i < res.data.length; i++) {
        this.ownerName = res.data[i].ownerName
        this.ownerPost = res.data[i].ownerPost
        this.ownerMobile = res.data[i].ownerMobile
        this.hospitalName = res.data[i].hospitalName
        this.majorField = res.data[i].majorField
        this.address = res.data[i].address
        this.introduction = res.data[i].introduction
      }
    }).catch(err => {
      console.error(err);
    })
    },

 /**
    * 诊所编辑
    */
    bianji() {
      this.dialogVisible=true   
      this.ownerName1 = this.ownerName
      this.ownerPost1= this.ownerPost
      this.ownerMobile1= this.ownerMobile
      this.majorField1= this.majorField
      this.hospitalName1= this.hospitalName
    },
    
    quding(){

if(this.ownerMobile.length!=11){
  console.log(444444)
}

      axios({
        url:"http://127.0.0.1:8686/api/Clinicxiugai",
        method :"get",
        params :{
          ownerName : this.ownerName1,
          ownerPost : this.ownerPost1,
          ownerMobile : this.ownerMobile1,
          majorField :this.majorField1,
          hospitalName : this.hospitalName1,
        }
      }).then((re)=>{
        this.dialogVisible=false   

        this.noe()
        if(re.data)
        alert("修改成功")

      })
    }
  }
 

}
</script>

<style>
p {
  font-weight: bold;
  /* margin-top: 10px; */
  margin-left: 10px;
}

.container1 {
  position: relative;
  height: 30%;
  width: 90%;
  background-color: white;
  margin-left: 2%;
  margin-right: 5%;
}

.container2 {
  height: 50%;
  width: 90%;
  background-color: white;
  margin-left: 2%;
  margin-right: 5%;
}

.btn {
  position: absolute;
  top: 0;
  right: 0;
}
</style>